<template>
  <div id="container" />
</template>
<script>
import * as THREE from 'three'
import { Screen } from './obj/screen'
export default {
  name: 'ThreeTemplate',
  components: {},
  props: {
    renderData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      data: [
        {
          area: '6亩',
          equipment: '42个',
          Yield: '5000KG',
          seed: '3种',
          name: '8号大棚',
          event: false
        },
        {
          area: '6亩',
          equipment: '30个',
          Yield: '9000KG',
          seed: '1种',
          name: '9号大棚',
          event: false
        },
        {
          area: '6亩',
          equipment: '22个',
          Yield: '8000KG',
          seed: '2种',
          name: '大棚C',
          event: false
        },
        {
          area: '6亩',
          equipment: '42个',
          Yield: '1000KG',
          seed: '2种',
          name: '大棚D',
          event: false
        },
        {
          area: '6亩',
          equipment: '13个',
          Yield: '58730KG',
          seed: '3种',
          name: '大棚E',
          event: false
        },
        {
          area: '6亩',
          equipment: '42个',
          Yield: '5000KG',
          seed: '3种',
          name: '大棚F',
          event: false
        },
        {
          area: '6亩',
          equipment: '30个',
          Yield: '9000KG',
          seed: '1种',
          name: '大棚G',
          event: false
        },
        {
          area: '6亩',
          equipment: '22个',
          Yield: '8000KG',
          seed: '2种',
          name: '大棚H',
          event: false
        },
        {
          area: '6亩',
          equipment: '42个',
          Yield: '1000KG',
          seed: '2种',
          name: '大棚I',
          event: false
        },
        {
          area: '6亩',
          equipment: '13个',
          Yield: '58730KG',
          seed: '3种',
          name: '大棚G',
          event: false
        },
        {
          area: '6亩',
          equipment: '42个',
          Yield: '5000KG',
          seed: '3种',
          name: '大棚K',
          event: false
        },
        {
          area: '6亩',
          equipment: '30个',
          Yield: '9000KG',
          seed: '1种',
          name: '大棚L',
          event: false
        },
        {
          area: '6亩',
          equipment: '22个',
          Yield: '8000KG',
          seed: '2种',
          name: '大棚M',
          event: false
        },
        {
          area: '6亩',
          equipment: '42个',
          Yield: '1000KG',
          seed: '2种',
          name: '大棚N',
          event: false
        },
        {
          area: '6亩',
          equipment: '13个',
          Yield: '58730KG',
          seed: '3种',
          name: '大棚B',
          event: false
        }
      ]
    }
  },
  watch: {
    renderData(value) {
      console.log(value, 'watchVal')
      this.delData()
    }
  },
  mounted() {
    this.init()
    window.addEventListener('resize', this.onWindowResize, false)
    document.getElementById('container').addEventListener('click', this.onMouseClick, false)
    document.getElementById('container').addEventListener('mousemove', this.onMouseClick, false)
  },
  methods: {
    delData() {
      // 模拟接口数据
      const mockData = this.renderData
      if (mockData[0]) {
        // 一号大棚相关属性设置
        this.data[1].name = mockData[0].greenhouseName || '-'
        this.data[1].id = mockData[0].greenhouseId
        this.data[1].equipment = mockData[0].equipment + '个'
        this.data[1].area = mockData[0].area + '亩'
        this.data[1].Yield = mockData[0].sale + 'KG'
        this.data[1].seed = mockData[0].product + '种'
        this.data[1].event = true
      }
      if (mockData[1]) {
        // 二号大棚相关属性设置
        this.data[2].name = mockData[1].greenhouseName || '-'
        this.data[2].id = mockData[1].greenhouseId
        this.data[2].equipment = mockData[1].equipment + '个'
        this.data[2].area = mockData[1].area + '亩'
        this.data[2].Yield = mockData[1].sale + 'KG'
        this.data[2].seed = mockData[1].product + '种'
        this.data[2].event = true
      }
      // 添加大棚
      this.scene.addObj(this.data)
    },
    init() {
      this.scene = new Screen('container')
      this.raycaster = new THREE.Raycaster()
      this.mouse = new THREE.Vector2()
    },
    onWindowResize() {
      this.scene.camera.instance.aspect = window.innerWidth / window.innerHeight
      this.scene.camera.instance.updateProjectionMatrix()
      this.scene.renderer.setSize(window.innerWidth, window.innerHeight)
    },
    onMouseClick(event) {
      event.preventDefault()
      const width = document.getElementById('container').offsetWidth
      const height = document.getElementById('container').offsetHeight
      const left = document.getElementById('container').getBoundingClientRect().left
      const top = document.getElementById('container').getBoundingClientRect().top
      this.mouse.x = ((event.clientX - left) / width) * 2 - 1
      this.mouse.y = -((event.clientY - top) / height) * 2 + 1
      this.updateMouse(event)
    },
    updateMouse(event) {
      this.raycaster.setFromCamera(this.mouse, this.scene.camera.instance)
      // // 地图块的
      const intersects = this.raycaster.intersectObjects(this.scene.getEventGroup())
      // 设置鼠标样式
      this.scene.renderer.domElement.style.cursor = 'auto'
      // // 点击时
      if (intersects.length > 0) {
        const selectName = intersects[0].object.name
        this.scene.select(selectName)
        this.scene.renderer.domElement.style.cursor = 'pointer'
        // console.log(this.scene.eventMap[selectName].data, 'this.scene.eventMap[selectName].data')
        const obj = this.scene.eventMap[selectName]
        if (event.type === 'click') {
          this.$router.push({
            path: '/child',
            query: {
              id: obj.id,
              name: obj.name
            }
          })
        }
        // this.setMap(inSt.object.infoData)
      }
    }
  }
}
</script>

<style scoped>
#container{
  width:100%;
  height:100%;
  background-color: red;
}
</style>
